<main class="dux-layout-page">
    <form class="dux-form uk-form" action="{url('avatar')}" method="post" data-dux="form-bind" data-advanced="false" enctype="multipart/form-data">
        <div  class="uk-text-center uk-form-custom uk-display-block"  id="preview">
            <input type="file" accept="image/*" name="avatar" id="avatar">
            <img src="{$userInfo.avatar}?t={time()}" class="uk-image-thumbnail uk-border-circle" style="width: 128px; height: 128px;">
        </div>
        <div class="uk-margin-top">
        <button class="uk-button uk-button-primary uk-button-block" type="submit">保存头像</button>
        </div>
    </form>
</main>
<script>
    Do('base', function () {

        // 选择图片
        var URL = window.URL || window.webkitURL;
        var blobURL;

        $('#avatar').change(function () {
            var files = this.files;
            var file;
            if (files && files.length) {
                file = files[0];
                blobURL = URL.createObjectURL(file);
                $('#preview').find('img').attr('src', blobURL);
            }
        });

    });
</script>
</html>